<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D立方体</title>
    <style>
        html{
            height: 100%;
        }
        body{
            margin: 0px;
            height: 100%;
        }
        section{
            height: 100%;
            position: relative;
            /*perspective 设置观察者与z=0 所在平面之间的距离。*/
            perspective:3000px;
            
            /*perspective-origin: 设置观察者的角度，以x轴和y轴为基准。
            默认值：50% 50%
            */
            perspective-origin: -50% 150%;
        }
        div{
            width: 300px;
            height: 300px;
            position: absolute;
            left: calc(50% - 300px/2);
            top: calc(50% - 300px/2);
        }
        div:nth-child(1){
            background-image: url(img/1.jpg);
            
            transform-origin: 设置转换的参考点，书页效果
            transform-origin: 50% 50% 0;
            
            transform: translateY(-150px) rotateX(90deg);
        }
        div:nth-child(2){
            background-image: url(img/2.jpg);
            transform: translateY(150px) rotateX(90deg);
        }
        div:nth-child(3){
            background-image: url(img/3.jpg);
            transform: translateX(-150px) rotateY(90deg);
        }
        div:nth-child(4){
            background-image: url(img/4.jpg);
            transform: translateX(150px) rotateY(90deg);
        }
        div:nth-child(5){
            background-image: url(img/5.jpg);
            transform: translateZ(150px);
        }
        div:nth-child(6){
            background-image: url(img/6.jpg);
            transform: translateZ(-150px);
        }
    </style>
</head>
<body>
    <section>
        <div>上</div>
        <div>下</div>
        <div>左</div>
        <div>右</div>
        <div>前</div>
        <div>后</div>
    </section>
</body>
</html>